<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			Vue中使用组件的三大步骤：
					一、定义组件（创建组件）
					二、注册组件
					三、写组件标签

					一、定义组件：
									使用Vue.extend(options)，其中的options和new Vue(options)中的options几乎一样，但也有点小区别
											1.el不要写，为什么？
													所有的组件，最终都有一个vm进行管理，由vm决定服务哪个容器，所有的组件都跟随vm走。
											2.data必须写成函数，为什么？
													避免组件后期复用时产生数据的干扰
					二、注册组件
									利用一个新的配置项：components:{组件名：组件}
					三、写组件标签
									<School></School>
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- 第三步：写组件标签 -->
			<School></School>
			<hr>
			<Person></Person>
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false

		//第一步：创建一个School组件
		const School = Vue.extend({
			template:`
				<div>
					<h2>学校名称:{{sname}}</h2>
					<h2>学校地址:{{address}}</h2>
					<button @click="sname+='~'">修改学校名</button>
					<button @click="welcome">欢迎同学们</button>	
				</div>
			`,
			data(){
				return {
					sname:'尚硅谷',
					address:'宏福科技园',
				}
			},
			methods:{
				welcome(){
					alert(`${this.sname}欢迎你！`)
				}
			}
		})

		//第一步：创建一个Person组件
		const Person = Vue.extend({
			template:`
				<div>
					<h2>人名:{{pname}}</h2>
					<h2>年龄:{{age}}</h2>
					<button @click="age++">年龄+1</button>
					<button @click="speak">说话</button>
				</div>
			`,
			data(){
				return {
					pname:'张三',
					age:18
				}
			},
			methods:{
				speak(){
					alert('十一来了，我要好好学习！')
				}
			}
		})
		
		//创建vm（它是整个应用的大哥，而且只能有一个）
		new Vue({
			el:'#demo',
			//第二步：注册组件
			components:{
				School,
				Person
			}
		})
	</script>
</html>